<template>
	<div class="card-min">
		<van-tabs class="card" type="card" animated @click="loadingSkeleton">
			<van-tab class="tab-item" title="mixin混入" name="a">
				<van-skeleton class="van-skeleton" title avatar :row="10" :loading="loading">
					<h3>骨架屏由于每个页面都需要用到，所以已经写到了mixin混入中。</h3>
					<p>{{name}}</p>
					<van-field class="input-item" style="width:100%;" v-model="text" placeholder="请输入要给mixin传输的内容" />
					<van-button class="button" type="info" size="small"  @click="sendGet">点击传递</van-button>
					<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
					<h3>什么是mixin混入？</h3>
					<p class="item-text">一个.vue文件由template，script，style组成，混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”（mixin对象的结构和.vue的script里面的结构一样），既此组件既可以调用组件内部的script，也可以调用混入对象。</p>
					<p class="item-text">假如两个组件混合了相同的mixin，但是两个组件不是共用关系，他们彼此没有影响。</p>
					<van-button class="button" to="/"   type="warning" size="small"  >返回首页</van-button>
				</van-skeleton>
			</van-tab>
			<van-tab class="tab-item" title="slot插槽" name="b">
				<van-skeleton class="van-skeleton" title avatar :row="10" :loading="loading">
					<h3>vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。</h3>
					<p>在组件标签内部写入的内容默认的会被替换掉，如果想要在组件的模板里使用这些内容，就在对应的位置写上slot标签，这个slot标签就代表着这些内容。</p>
					
					<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
					<h3>匿名槽口（在父组件中使用子组件的时候，在子组件标签内部写的内容，在子组件的模板中可以通过{{slot}}来使用）</h3>
					<type-component> 你看到的是父组件插入子组件插槽的内容 </type-component>
					
					<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
					<h3>具名槽口</h3>
					<p class="item-text">父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过使用带有name属性的slot标签来放置对应的slot，当slot不存在的时候，slot标签内写的内容就出现。</p>
					<p class="item-text">slot上面通过name属性指定槽口名称，然后使用的时候通过slot="槽口名称"。</p>
					<type-component> 
					<!-- v-slot可替换为# -->
						 <template #header> 
							<p>头部区域</p>
						  </template>
						
						  <template #default>
							<p>内容区域</p>
						  </template>
						
						  <template #footer>
							<p>底部区域</p>
						  </template>
					 </type-component>
					
					<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
					
						<h3>作用域插槽</h3>
						<p>有时让插槽内容能够访问子组件中才有的数据是很有用的</p>
						<type-component> 
						<!-- ES6结构 {title:'我是子组件这边过来的标题'} = {title} -->
						  <template #header="{title}"><p>{{title}}</p></template> 
						  <template #default="{user}"><p>{{user.firstName}}</p></template>
						</type-component>
					
					<van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>
				</van-skeleton>
			</van-tab>
			<van-tab class="tab-item" title="extends" name="c">
				<van-skeleton class="van-skeleton" title avatar :row="10" :loading="loading">
				<h3>extends与mixin类似，extends会比mixins先执行。执行顺序：extends  > mixins > 组件</h3>
				<p>这里引入mixin的数据：{{test}}</p>
				<p>这里引入extends的数据：{{myextends}}</p>
				</van-skeleton>
			</van-tab>
		</van-tabs>
	</div>
</template>
<script>
	import myextends from '@/extends/extends';//引入extends
	import mixin from '@/mixin/mixin'; //这里引入minxin
	import TypeComponent from './TypeComponent';
	import { Toast } from 'vant';
	export default{
		mixins: [mixin],//这里配置后，在mixin.js里面写入的数据，会直接混入到当前数据里面，直接调用就好。
		data(){
			return{
				text:'',
				slot:'<slot></slot>'
			}
		},
		components:{
			TypeComponent
		},
		mounted() {
			setTimeout(()=>{
				this.endSkeleton();
			},1000)
		},
		methods:{
			loadingSkeleton(){
				this.loadSkeleton();
				setTimeout(()=>{
					this.endSkeleton();
				},1000)
			},
			sendGet(){
				if(!this.text){
					Toast('请输入内容再传输');
					return
				}
				this.getMsg(this.text)
			}
		},
		extends:myextends
	}
</script>

<style lang="scss" scoped>
	.card-min{
		padding-top:20px;
	}
	.van-skeleton{
		padding-top:20px;
	}
	.tab-item{
		h3{
			font-size:15px;
			margin:14px;
			line-height: 24px;
		}
		p{
			font-size:14px;
			margin:6px 14px;
			line-height: 20px;
		}
		.button{
			margin:6px 14px;
		}
		.input-item{
			width:90% !important;
			margin:6px 14px;
		}
		.item-text{
			color:darkred;
			line-height:22px;
		}
	}
	
</style>
